<template>
    <div style="display: inline;">
      <span :style="{display:isLine?'block':'inline'}" v-for="(item,index) in dictData" :key="index">
          <span class="the_style" v-show="!modelValueList.includes(item.value)" @click="isDetail?'':editCheck(item.value)">&#9744; </span>
          <span class="the_style" style="font-size: 18px;font-weight: bold;" v-show="modelValueList.includes(item.value)" @click="isDetail?'':editCheck(0)">&#9745;</span> <span v-html="item.label"></span>
              <slot :name="'name'+item.value"></slot>
      </span>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, toRefs, onMounted} from 'vue'
  const emit = defineEmits(['update:modelValue','change'])
  type Props = {
      dictData?:any
      modelValue?:string|number|null|undefined
      isLine?:boolean
      isDetail?:boolean
  }
  let props = withDefaults(defineProps<Props>(),{
      dictData:[],
      modelValue:null,
      isLine:false,
      isDetail:false
  })
  let modelValueList =ref([]) 
  modelValueList.value = String(props.modelValue).split(',')
  
  const editCheck = (val) =>{
      emit("update:modelValue",val)
      emit("change",val)
  }
  </script>
  <style scoped lang="scss">
  .the_style{
      margin-left:5px;
      cursor: pointer;
      font-size: 18px;
  }
  </style>